<!--
 * @Date         : 2024-03-01 20:29:20
 * @LastEditTime : 2024-09-05 20:39:41
 * @description  : 头部样式
-->
<script setup>
import { getExamProblem } from "@/api";
import router from "@/router";
import { onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
const timeText = ref("");
const endTime = ref("");
const endTimeintervalId = ref("");
let targetTime = ""; // 当前时间 + 10分钟
const isStart = ref(true);
const isHideRight = ref(false);
const isProgress = ref(false); // 进行中
let userInfo = reactive({});
const isStartButton = ref(false);
const route = useRoute();
const props = defineProps(["title", "isHideRight"]);
const title = props.title || "中药处方审核模块考试真题模拟";
let { start_time, end_time } = JSON.parse(sessionStorage.getItem("examInfo"));

let emit = defineEmits(["end"]);

// 更新倒计时函数
function updateCountdown() {
  let time = () => {
    const currentTime = new Date().getTime();
    const timeLeft = targetTime - currentTime;
    if (timeLeft >= 0) {
      const H = Math.floor((timeLeft / 1000 / 60 / 60) % 60);
      const minutes = Math.floor((timeLeft / 1000 / 60) % 60);
      const seconds = Math.floor((timeLeft / 1000) % 60);
      // 格式化显示

      time.value = `${H}时${minutes}分${seconds}秒`;
    } else {
      clearInterval(endTimeintervalId.value);
      timeText.value = "开始考试";
      isStart.value = false;
    }
  };
  time();
  endTimeintervalId.value = setInterval(time, 1000);
}

// 设置间隔ID
// 开始考试
const onStart = async () => {
  isStartButton.value = ["/notice"].includes(route.path);
  let newTime = new Date().getTime();
  start_time = new Date(start_time).getTime();
  end_time = new Date(end_time).getTime();
  // 判断是否到考试时间
  if (newTime < start_time) {
    ElMessage.error("未到考试时间！！");
    return;
  }
  if (newTime > end_time) {
    ElMessage.error("已过考试时间！！");
    return;
  }
  let { id } = JSON.parse(sessionStorage.getItem("examInfo"));
  try {
    let res = await getExamProblem({ id });
  } catch (error) {
    if (error.code != 200) {
      ElMessage({
        showClose: true,
        message: error.msg,
        type: "error",
      });
      return;
    }
  }
  clearInterval(endTimeintervalId.value);
  isProgress.value = true;
  sessionStorage.setItem("startTime", +new Date());
  let { minute } = JSON.parse(sessionStorage.getItem("examInfo"));
  let endTime = +new Date() + Number(minute) * 60 * 1000;
  sessionStorage.setItem("endTime", endTime);
  endTimeFun(endTime);
  import.meta.env.VITE_API_DEV_ENV === "yydt"
    ? router.replace("/answerPage_yydt")
    : router.replace("/answerPage_zcydt");
};

//距离结束时间计算
function endTimeFun(value) {
  let time = () => {
    const timeLeft = value - new Date();
    if (timeLeft >= 0) {
      const H = Math.floor((timeLeft / 1000 / 60 / 60) % 60);
      const minutes = Math.floor((timeLeft / 1000 / 60) % 60);
      const seconds = Math.floor((timeLeft / 1000) % 60);
      // 格式化显示
      endTime.value = `${H}时${minutes}分${seconds}秒`;
      if (minutes === 3) {
        emit("end", `${minutes}分`);
      }
    } else {
      clearInterval(endTimeintervalId.value);
      emit("end");
    }
  };
  time();
  endTimeintervalId.value = setInterval(time, 1000);
}
// 更新组件数据
const updatedPage = (value) => {
  isStartButton.value = ["/notice"].includes(route.path);
  let { start_time } = JSON.parse(sessionStorage.getItem("examInfo"));
  start_time = new Date(start_time).getTime();
  targetTime = start_time;
  userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
  let startTime = value || sessionStorage.getItem("startTime");
  if (startTime) {
    isProgress.value = true;
    let endTime = value || sessionStorage.getItem("endTime");
    endTimeFun(endTime);
  } else {
    updateCountdown();
  }
};
onMounted(() => {
  updatedPage();
});
</script>

<template>
  <div class="header-top">
    <div class="header-top-left">
      <div class="user-img">
        <el-image
          style="width: 100p%; height: 100p%"
          :src="userInfo.avatar"
        ></el-image>
      </div>
      <div class="user-info">
        <div>姓名：{{ userInfo.realname }}</div>
        <div>准考证号：{{ userInfo.examinee_number }}</div>
        <div>证件号码：{{ userInfo.idcard }}</div>
      </div>
    </div>
    <div class="title">{{ title }}</div>
    <div class="header-top-right" v-if="isHideRight">
      <div class="time" v-if="!isProgress">距离考试还有：{{ timeText }}</div>
      <div class="fontcolor" v-else>距离考试结束：{{ endTime }}</div>
      <div class="start">
        <el-button
          v-if="isStartButton"
          type="primary"
          size="mini"
          style="color: #fff; margin-left: 20px"
          color="#F1A72E"
          @click="onStart"
          :disabled="isStart"
        >
          进入考试
        </el-button>
      </div>
    </div>
    <div class="header-top-right" v-if="!isHideRight"></div>
  </div>
</template>
<style lang="scss" scoped>
.header-top {
  display: flex;
  width: 100%;
  background: #652e1b;
  color: #fff;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px 20px;
  height: 80px;
  &-left {
    display: flex;
    width: 500px;
    font-size: 12px;
    line-height: 1.4;
    .user-img {
      width: 49px;
      height: 49px;
      background: #fff;
      margin-right: 10px;
    }
    .user-info {
    }
  }
  .title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
  }
  &-right {
    width: 500px;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    line-height: 20px;
    font-style: normal;
    font-weight: 600;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .fontcolor {
      color: #ff0000;
    }
  }
}
</style>
